```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Git分支合并检测指南</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            color: #333;
            line-height: 1.6;
        }
        .hero {
            background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%);
        }
        .card {
            transition: all 0.3s ease;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
        }
        .code-block {
            background-color: #2d2d2d;
            color: #f8f8f2;
            border-radius: 6px;
            padding: 1rem;
            font-family: 'Courier New', Courier, monospace;
            position: relative;
        }
        .code-copy {
            position: absolute;
            top: 0.5rem;
            right: 0.5rem;
            color: #9ca3af;
            cursor: pointer;
            transition: color 0.2s;
        }
        .code-copy:hover {
            color: #ffffff;
        }
        .first-letter {
            float: left;
            font-size: 3.5rem;
            line-height: 1;
            margin-right: 0.5rem;
            margin-top: 0.2rem;
            font-weight: 700;
            color: #6e8efb;
        }
        .divider {
            height: 1px;
            background: linear-gradient(90deg, transparent 0%, rgba(110, 142, 251, 0.5) 50%, transparent 100%);
            margin: 2rem 0;
        }
        .tag {
            display: inline-block;
            padding: 0.25rem 0.75rem;
            border-radius: 9999px;
            font-size: 0.75rem;
            font-weight: 600;
            margin-right: 0.5rem;
            margin-bottom: 0.5rem;
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- Hero Section -->
    <section class="hero text-white py-20 px-4 md:py-32">
        <div class="container mx-auto max-w-6xl">
            <div class="flex flex-col md:flex-row items-center">
                <div class="md:w-1/2 mb-10 md:mb-0">
                    <h1 class="text-4xl md:text-5xl font-bold mb-4 leading-tight">掌握Git分支合并检测</h1>
                    <p class="text-xl md:text-2xl mb-6 opacity-90">四种高效方法助你轻松管理代码库</p>
                    <p class="text-lg opacity-80 mb-8">在Git中判断分支是否已合并是代码管理的关键技能，本指南将为你详细解析四种实用方法，提升你的开发效率。</p>
                    <div class="flex flex-wrap">
                        <span class="tag bg-white text-purple-600">Git命令</span>
                        <span class="tag bg-white text-purple-600">分支管理</span>
                        <span class="tag bg-white text-purple-600">开发效率</span>
                    </div>
                </div>
                <div class="md:w-1/2">
                    <div class="mermaid">
                        graph TD
                            A[分支管理] --> B[git branch --merged]
                            A --> C[git merge-base]
                            A --> D[git reflog]
                            A --> E[git diff]
                            B --> F[快速查看已合并分支]
                            C --> G[精确比较分支关系]
                            D --> H[通过历史记录验证]
                            E --> I[直接比较差异]
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Main Content -->
    <main class="container mx-auto max-w-4xl px-4 py-12">
        <!-- Introduction -->
        <section class="mb-16">
            <div class="first-letter">在</div>
            <p class="text-lg text-gray-700">Git中，判断一个分支是否已经被合并是管理和维护代码库的重要操作。这通常在以下几种场景中发生：当你准备删除一个分支时，需要确保它的更改已经被合并；或者在处理复杂的合并冲突时，你需要确认某些更改是否已经融入了主分支。</p>
        </section>

        <!-- Method 1 -->
        <section class="mb-16">
            <div class="flex items-center mb-6">
                <div class="bg-purple-100 text-purple-600 w-12 h-12 rounded-full flex items-center justify-center mr-4">
                    <span class="text-2xl font-bold">1</span>
                </div>
                <h2 class="text-2xl md:text-3xl font-bold">使用 <code class="bg-purple-100 px-2 py-1 rounded">git branch --merged</code> 命令</h2>
            </div>
            <p class="text-gray-700 mb-6"><code>git branch --merged</code> 命令列出了当前分支上所有已经被合并到当前分支的分支。这个命令会帮助你快速查看哪些分支的更改已经融入当前分支。</p>
            
            <h3 class="text-xl font-semibold mb-4 text-gray-800">使用步骤:</h3>
            <ul class="list-disc pl-6 mb-6 text-gray-700 space-y-2">
                <li>确保你在目标分支上（即你想要检查合并状态的分支）。</li>
                <li>运行以下命令：</li>
            </ul>
            
            <div class="code-block mb-6">
                <div class="code-copy" onclick="copyCode(this)"><i class="far fa-copy"></i></div>
                <pre><code>git branch --merged</code></pre>
            </div>
            
            <h3 class="text-xl font-semibold mb-4 text-gray-800">示例:</h3>
            <div class="code-block mb-6">
                <div class="code-copy" onclick="copyCode(this)"><i class="far fa-copy"></i></div>
                <pre><code># 假设你在主分支上运行该命令
git branch --merged</code></pre>
            </div>
            
            <p class="text-gray-700">该命令输出的分支列表包含了那些已经被合并到当前分支的分支。如果你看到目标分支在这个列表中，说明它的更改已经被合并。</p>
        </section>

        <div class="divider"></div>

        <!-- Method 2 -->
        <section class="mb-16">
            <div class="flex items-center mb-6">
                <div class="bg-blue-100 text-blue-600 w-12 h-12 rounded-full flex items-center justify-center mr-4">
                    <span class="text-2xl font-bold">2</span>
                </div>
                <h2 class="text-2xl md:text-3xl font-bold">使用 <code class="bg-blue-100 px-2 py-1 rounded">git merge-base</code> 和 <code class="bg-blue-100 px-2 py-1 rounded">git log</code> 命令</h2>
            </div>
            <p class="text-gray-700 mb-6">这种方法涉及到使用 <code>git merge-base</code> 查找两个分支的共同祖先，然后用 <code>git log</code> 检查该祖先是否在目标分支中存在。</p>
            
            <h3 class="text-xl font-semibold mb-4 text-gray-800">使用步骤:</h3>
            <ul class="list-disc pl-6 mb-6 text-gray-700 space-y-2">
                <li>找到两个分支的共同祖先：</li>
            </ul>
            
            <div class="code-block mb-6">
                <div class="code-copy" onclick="copyCode(this)"><i class="far fa-copy"></i></div>
                <pre><code>git merge-base &lt;target-branch&gt; &lt;source-branch&gt;</code></pre>
            </div>
            
            <ul class="list-disc pl-6 mb-6 text-gray-700 space-y-2">
                <li>检查目标分支是否包含这个共同祖先：</li>
            </ul>
            
            <div class="code-block mb-6">
                <div class="code-copy" onclick="copyCode(this)"><i class="far fa-copy"></i></div>
                <pre><code>git log &lt;target-branch&gt; --ancestry-path &lt;ancestor-commit&gt;..HEAD</code></pre>
            </div>
            
            <h3 class="text-xl font-semibold mb-4 text-gray-800">示例:</h3>
            <div class="code-block mb-6">
                <div class="code-copy" onclick="copyCode(this)"><i class="far fa-copy"></i></div>
                <pre><code># 查找共同祖先
ancestor_commit=$(git merge-base main feature-branch)

# 检查目标分支是否包含该祖先
git log main --ancestry-path $ancestor_commit..HEAD</code></pre>
            </div>
            
            <p class="text-gray-700">如果 <code>git log</code> 输出了相关的提交，说明目标分支已经包含了从共同祖先到当前分支的所有更改，即目标分支已经包含了源分支的更改。</p>
        </section>

        <div class="divider"></div>

        <!-- Method 3 -->
        <section class="mb-16">
            <div class="flex items-center mb-6">
                <div class="bg-green-100 text-green-600 w-12 h-12 rounded-full flex items-center justify-center mr-4">
                    <span class="text-2xl font-bold">3</span>
                </div>
                <h2 class="text-2xl md:text-3xl font-bold">使用 <code class="bg-green-100 px-2 py-1 rounded">git reflog</code> 和 <code class="bg-green-100 px-2 py-1 rounded">git log</code> 命令</h2>
            </div>
            <p class="text-gray-700 mb-6">通过查看提交历史（使用 <code>git reflog</code>）和提交记录（使用 <code>git log</code>），你可以确定特定的分支是否已经被合并。</p>
            
            <h3 class="text-xl font-semibold mb-4 text-gray-800">使用步骤:</h3>
            <ul class="list-disc pl-6 mb-6 text-gray-700 space-y-2">
                <li>查看目标分支的历史记录：</li>
            </ul>
            
            <div class="code-block mb-6">
                <div class="code-copy" onclick="copyCode(this)"><i class="far fa-copy"></i></div>
                <pre><code>git reflog &lt;target-branch&gt;</code></pre>
            </div>
            
            <ul class="list-disc pl-6 mb-6 text-gray-700 space-y-2">
                <li>查看源分支的历史记录：</li>
            </ul>
            
            <div class="code-block mb-6">
                <div class="code-copy" onclick="copyCode(this)"><i class="far fa-copy"></i></div>
                <pre><code>git log &lt;source-branch&gt;</code></pre>
            </div>
            
            <h3 class="text-xl font-semibold mb-4 text-gray-800">示例:</h3>
            <div class="code-block mb-6">
                <div class="code-copy" onclick="copyCode(this)"><i class="far fa-copy"></i></div>
                <pre><code># 查看主分支的历史记录
git reflog main

# 查看源分支的历史记录
git log feature-branch</code></pre>
            </div>
            
            <p class="text-gray-700">如果目标分支的历史记录中包含源分支的提交记录，说明源分支已经被合并到目标分支。</p>
        </section>

        <div class="divider"></div>

        <!-- Method 4 -->
        <section class="mb-16">
            <div class="flex items-center mb-6">
                <div class="bg-yellow-100 text-yellow-600 w-12 h-12 rounded-full flex items-center justify-center mr-4">
                    <span class="text-2xl font-bold">4</span>
                </div>
                <h2 class="text-2xl md:text-3xl font-bold">使用 <code class="bg-yellow-100 px-2 py-1 rounded">git diff</code> 命令</h2>
            </div>
            <p class="text-gray-700 mb-6">通过 <code>git diff</code> 比较两个分支的差异，你可以直接看到源分支的更改是否已经融入目标分支。</p>
            
            <h3 class="text-xl font-semibold mb-4 text-gray-800">使用步骤:</h3>
            <ul class="list-disc pl-6 mb-6 text-gray-700 space-y-2">
                <li>运行以下命令：</li>
            </ul>
            
            <div class="code-block mb-6">
                <div class="code-copy" onclick="copyCode(this)"><i class="far fa-copy"></i></div>
                <pre><code>git diff &lt;target-branch&gt; &lt;source-branch&gt;</code></pre>
            </div>
            
            <h3 class="text-xl font-semibold mb-4 text-gray-800">示例:</h3>
            <div class="code-block mb-6">
                <div class="code-copy" onclick="copyCode(this)"><i class="far fa-copy"></i></div>
                <pre><code># 比较目标分支和源分支的差异
git diff main feature-branch</code></pre>
            </div>
            
            <p class="text-gray-700">如果命令的输出为空，说明目标分支已经包含了源分支的所有更改，即源分支的更改已经被合并。</p>
        </section>

        <!-- Summary Section -->
        <section class="bg-white rounded-xl shadow-md p-8 mb-16">
            <h2 class="text-2xl md:text-3xl font-bold mb-6 text-center">方法对比总结</h2>
            
            <div class="overflow-x-auto">
                <table class="w-full">
                    <thead>
                        <tr class="bg-gray-100">
                            <th class="px-6 py-3 text-left text-sm font-semibold text-gray-700">方法</th>
                            <th class="px-6 py-3 text-left text-sm font-semibold text-gray-700">优点</th>
                            <th class="px-6 py-3 text-left text-sm font-semibold text-gray-700">适用场景</th>
                            <th class="px-6 py-3 text-left text-sm font-semibold text-gray-700">复杂度</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-200">
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap font-medium">git branch --merged</td>
                            <td class="px-6 py-4">简单快捷，一目了然</td>
                            <td class="px-6 py-4">快速查看已合并分支</td>
                            <td class="px-6 py-4">★☆☆☆☆</td>
                        </tr>
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap font-medium">git merge-base + git log</td>
                            <td class="px-6 py-4">精确，可验证共同祖先</td>
                            <td class="px-6 py-4">需要验证分支关系</td>
                            <td class="px-6 py-4">★★★☆☆</td>
                        </tr>
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap font-medium">git reflog + git log</td>
                            <td class="px-6 py-4">可查看历史记录</td>
                            <td class="px-6 py-4">通过历史记录验证</td>
                            <td class="px-6 py-4">★★☆☆☆</td>
                        </tr>
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap font-medium">git diff</td>
                            <td class="px-6 py-4">直接比较差异</td>
                            <td class="px-6 py-4">需要查看具体差异</td>
                            <td class="px-6 py-4">★★☆☆☆</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </section>
    </main>

    <!-- Footer -->
    <footer class="bg-gray-900 text-gray-300 py-8">
        <div class="container mx-auto max-w-6xl px-4">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="mb-4 md:mb-0">
                    <h3 class="text-xl font-bold text-white mb-2">技术小馆</h3>
                    <p class="text-gray-400">专业的技术知识分享平台</p>
                </div>
                <div>
                    <a href="http://www.yuque.com/jtostring" class="text-white hover:text-purple-300 transition-colors duration-300" target="_blank">
                        <i class="fas fa-external-link-alt mr-2"></i>技术小馆地址：http://www.yuque.com/jtostring
                    </a>
                </div>
            </div>
        </div>
    </footer>

    <script>
        // Initialize Mermaid
        mermaid.initialize({
            startOnLoad: true,
            theme: 'dark',
            flowchart: {
                useMaxWidth: false,
                htmlLabels: true,
                curve: 'basis'
            }
        });

        // Copy code function
        function copyCode(element) {
            const codeBlock = element.parentElement;
            const code = codeBlock.querySelector('pre').textContent;
            navigator.clipboard.writeText(code).then(() => {
                const originalIcon = element.innerHTML;
                element.innerHTML = '<i class="fas fa-check"></i>';
                setTimeout(() => {
                    element.innerHTML = originalIcon;
                }, 2000);
            });
        }
    </script>
</body>
</html>
```